import React, { useEffect, useState, useRef } from 'react'
import { List, Avatar, Image, message, Button, Typography, Modal, Tag, Input, InputNumber, Table, Space, Tooltip, Row, Col } from 'antd';
import { QuestionCircleTwoTone } from '@ant-design/icons';
import axios from 'axios';
import { useNavigate } from 'react-router-dom'
import MySpan from '../../../components/MySpan'
import moment from 'moment'
const { Text } = Typography
export default function Index() {
  const loginOrg = JSON.parse(localStorage.getItem("loginOrg"));
  const [listData, setListData] = useState([]);
  useEffect(async () => {
    const resp = await axios.get("http://localhost:8080/qryForMeDonation?orgid=" + loginOrg.id)
    setListData(resp.data.data)
    console.log(resp);

    return () => {

    };
  }, []);
  const agreeModal = (record) => {
    Modal.confirm({
      title: '确认',
      content: (
        <div>
          <p>请确认物品信息及数量正确,通过后将发放本次积分</p>
        </div>
      ),
      onOk() {
        console.log(record);
        axios.post("http://localhost:8080/agreeDo", record).then(resp => {
          if (resp.data.state == "0") {
            message.success(resp.data.message, 1)
            setTimeout(() => {
              window.location.reload()
            }, 300);
          } else {
            message.error(resp.data.message, 1)
          }
        }).catch(err => {
          message.error("网络异常!")
          setTimeout(() => {
            window.location.reload()
          }, 300);
        })
      },
    });
  }

  // const rejectModal = (record) => {
  //   Modal.confirm({
  //     title: '确认',
  //     content: (
  //       <div>
  //         <p>拒绝本次申请?</p>
  //       </div>
  //     ),
  //     onOk() {
  //       console.log(record);
  //       axios.post("http://localhost:8080/rejectMyChangeRespondent", record).then(resp => {
  //         console.log(resp);
  //         if (resp.data.state === "0") {
  //           message.success(resp.data.message, 1);
  //           setTimeout(() => {
  //             window.location.reload()
  //           }, 800);
  //         } else {
  //           message.error(resp.data.message, 1);
  //         }
  //       }).catch(err => {
  //         message.error("网络异常!", 1);
  //       })
  //     },
  //   });
  // }
  const showDetailGoods = (record) => {
    Modal.info({
      title: '详细信息',
      content: <Row>
        {record.dodetail.map((item, index) => {
          return <Tag color="green">{item.goodsname}X{item.goodsnum}</Tag>
        })}
      </Row>,

    });
  }
  const columns = [
    {
      title: '用户昵称',
      key: 'nickname',
      render: (text, record) => (
        <Text type="secondary">{record.nickname}</Text>
      ),
    },
    {
      title: <Tooltip title="点击查看详情">物品数量 <QuestionCircleTwoTone /></Tooltip>,
      ellipsis: true,
      key: 'address',
      render: (text, record) => (
        <Space onClick={() => { showDetailGoods(record) }}>
          {record.dodetail.map((item, index) => {
            return <Tag color="green">{item.goodsname}X{item.goodsnum}</Tag>
          })}
        </Space>
      ),
    },


    {
      title: <Tooltip title="物品数量正确将获得的积分,如有误请修改">
        <span>预计积分 </span>
        <QuestionCircleTwoTone />
      </Tooltip>,
      key: 'point',
      render: (text, record) => (
        <Text type="secondary">{record.point}</Text>
      ),
    },
    {
      title: '物流编号',
      key: 'dostate',
      render: (text, record) => (
        <MySpan title={record.doexpress} />
      ),
    },
    {
      title: '日期',
      key: 'createtime', ellipsis: true,
      sorter: (a, b) => a.createtime - b.createtime,
      render: (text, record) => (
        <MySpan title={moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')} />
      )
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle" key="useraction">
          {
            record.dostate == "1" ?
              <>
                <Button type="primary" onClick={() => { agreeModal(record) }}>通过</Button>
                <Button danger type="primary" onClick={() => { editDo(record) }}>修改</Button>
              </> :

              <></>
          }
        </Space >
      ),
    },

  ];
  // const drawerOpen = (record) => {
  //   axios.get("http://localhost:8080/getChaneInfoById?id=" + record.respondentchangeinfoid).then(resp => {
  //     console.log("GETCHANGEINFOBYID:", resp.data);
  //     setCheckData([resp.data.data]);
  //     setDrawerVisible(true)
  //   })
  // }
  // const drawerOpen2 = (record) => {
  //   axios.get("http://localhost:8080/getChaneInfoById?id=" + record.applychangeinfoid).then(resp => {
  //     console.log("GETCHANGEINFOBYID:", resp.data);
  //     setCheckData([resp.data.data]);
  //     setDrawerVisible2(true)
  //   })
  // }
  // const showWriteModal = (record) => {
  //   setWriteModal(true)
  //   setResponderexpressinfo(record)
  // }
  // const writeModalOK = () => {
  //   //填写我的物流单号
  //   let rs = responderexpressinfo;
  //   rs.responderexpressid = myExpressId.current.state.value
  //   setResponderexpressinfo(rs)
  //   console.log(responderexpressinfo); //
  //   axios.post("http://localhost:8080/saveresponderexpressid", responderexpressinfo).then(resp => {
  //     console.log(resp);
  //     if (resp.data.state === "0") {
  //       message.success(resp.data.message, 1)
  //       setWriteModal(false);
  //       setTimeout(() => {
  //         window.location.reload()
  //       }, 800);
  //     } else {
  //       message.error(resp.data.message, 1)
  //       setWriteModal(false);
  //       setTimeout(() => {
  //         window.location.reload()
  //       }, 800);
  //     }
  //   }).catch(err => {
  //     message.error("网络异常!", 1);
  //     setWriteModal(false);
  //     setTimeout(() => {
  //       window.location.reload()
  //     }, 800);
  //   })



  // }

  const editDo = (record) => {
    console.log(record);
    let donationRs = { doid: record.doid, goods: [] };
    Modal.confirm({
      title: '修改数量',
      content: <>
        {
          record.dodetail.map((item, index) => {
            return (
              <Row align="middle" justify="space-between" style={{ width: '80%', margin: '0 auto', marginBottom: 10 }}>
                <Col>
                  <Tag color="green">{item.goodsname}</Tag>
                </Col>
                <Col>
                  <InputNumber min={0} max={100} controls={false}
                    onChange={(value) => {
                      if (donationRs.goods.length == 0) {
                        donationRs.goods.push({ "goodsname": item.goodsname, "goodsnum": value.eventPhase })
                      }
                      for (let i = 0; i < donationRs.goods.length; i++) {
                        if (donationRs.goods[i].goodsname == item.goodsname) {
                          donationRs.goods[i].goodsnum = value;
                        } else {
                          if (i == donationRs.goods.length - 1) {
                            donationRs.goods.push({ "goodsname": item.goodsname, "goodsnum": value })
                          }
                        }
                      }
                    }
                    }
                  />
                </Col>
              </Row>

            )
          })
        }
      </>,
      onOk() {
        console.log(donationRs);

        if (donationRs.goods.length > 0) {
          axios.post("http://localhost:8080/editDo", donationRs).then(resp => {
            if (resp.data.state === "0") {
              message.success(resp.data.message, 1);
              setTimeout(() => {
                window.location.reload()
              }, 500);
            } else {
              message.error(resp.data.message, 1)
            }
          })
        }

      },
    });
  }
  return (
    <div sylte={{ displayl: 'flex' }}>
      <Table dataSource={listData} columns={columns} />

      {/* <Drawer
        title="我的物品"
        placement='bottom'
        width={500}
        onClose={() => { setDrawerVisible(false) }}
        visible={drawerVisible}
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={checkData}
          key="changeinfo1"
          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <Space direction="vertical" key="changeinfophoto1">
                  <Image
                    width={135}
                    src={`http://localhost:8080/getChangeInfoPhoto?id=${item.id}`}
                  />
                </Space>
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={`http://localhost:8080/getUserHead?id=${item.createrid}`} />}
                title={loginUser.nickname}
                description={`标题:${item.title}`}
                key="userhead"
              />
              {item.message}
            </List.Item>
          )}

        />
      </Drawer> */}

      {/* <Drawer
        title="TA的物品"
        placement='bottom'
        width={500}
        onClose={() => { setDrawerVisible2(false) }}
        visible={drawerVisible2}
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={checkData}
          key="changeinfo2"
          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <Space direction="vertical" key="changeinfophoto2">
                  <Image
                    width={135}
                    src={`http://localhost:8080/getChangeInfoPhoto?id=${item.id}`}
                  />
                </Space>
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={`http://localhost:8080/getUserHead?id=${item.createrid}`} />}
                title={`${item.nickname}(${item.city})`}
                description={`标题:${item.title}`}
                key="userhead2"
              />
              {item.message}
              <p>详细地址:{item.address}</p>
            </List.Item>
          )}

        />
      </Drawer> */}
      {/* <Modal
        title="填写物流单号"
        visible={writeModal}
        onCancel={() => { setWriteModal(false) }}
        onOk={writeModalOK}
      >
        <Input ref={myExpressId} />
      </Modal> */}
    </div>
  )
}
